<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.transportId ? '新增' : '修改'"
    :close-on-click-modal="false"
    width="1400px"
    class="transport-dialog"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="80px"
      @keyup.enter="onSubmit()"
    >
      <el-form-item
        label="模板名称"
        prop="transName"
        :rules="[
          { required: true, message: '模板名称不能为空' },
          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的模板名称', trigger: 'blur' },
        ]"
      >
        <el-input v-model="dataForm.transName" placeholder="模板名称" />
      </el-form-item>
      <el-form-item label="模板类型" prop="isFreeFee" required="required">
        <el-radio-group v-model="dataForm.isFreeFee" @change="changeFreeFee">
          <el-radio :label="0"> 买家承担运费 </el-radio>
          <el-radio :label="1"> 卖家包邮 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="收费方式" prop="chargeType">
        <el-radio-group v-model="dataForm.chargeType" :disabled="dataForm.isFreeFee == 1">
          <el-radio :label="0"> 按件数 </el-radio>
          <el-radio :label="1"> 按重量 </el-radio>
          <el-radio :label="2"> 按体积 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-table :data="dataForm.transfees" border style="width: 100%" class="table-con">
        <el-table-column
          header-align="center"
          align="center"
          width="450"
          label="可配送区域"
        >
          <template #default="scope">
            <span v-if="scope.$index == 0">所有地区</span>
            <span
              v-if="
                (!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0
              "
              >请选择可配送区域</span
            >
            <span v-if="scope.$index > 0">
              <el-tag v-for="city in scope.row.cityList" :key="city.areaId">{{
                city.areaName
              }}</el-tag>
            </span>
            <el-button
              v-if="isAuth('shop:transfee:update') && scope.$index > 0"
              type="text"
              @click="onAddOrUpdate(`${scope.$index}`)"
            >
              编辑
            </el-button>
            <el-button
              v-if="isAuth('shop:transfee:delete') && scope.$index > 0"
              type="text"
              @click="onDelete(`${scope.$index}`)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="180"
          :label="tableTitle[0]"
        >
          <template #default="scope">
            <el-form-item
              :prop="`transfees.${scope.$index}.firstPiece`"
              label-width="0px"
              :rules="[{ required: true, message: `${tableTitle[0]}不能为空` }]"
            >
              <el-input
                v-model="scope.row.firstPiece"
                type="number"
                :disabled="!scope.row.status && scope.$index === 0"
                @change="checkNumber(scope.row, 1)"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" :label="tableTitle[1]">
          <template #default="scope">
            <el-form-item
              :prop="`transfees.${scope.$index}.firstFee`"
              label-width="0px"
              :rules="[{ required: true, message: `${tableTitle[1]}不能为空` }]"
            >
              <el-input
                v-model="scope.row.firstFee"
                type="number"
                :min="0"
                :disabled="!scope.row.status && scope.$index === 0"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" :label="tableTitle[2]">
          <template #default="scope">
            <el-form-item
              :prop="`transfees.${scope.$index}.continuousPiece`"
              label-width="0px"
              :rules="[{ required: true, message: `${tableTitle[2]}不能为空` }]"
            >
              <el-input
                v-model="scope.row.continuousPiece"
                type="number"
                :disabled="!scope.row.status && scope.$index === 0"
                @change="checkNumber(scope.row, 3)"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" :label="tableTitle[3]">
          <template #default="scope">
            <el-form-item
              :prop="`transfees.${scope.$index}.continuousFee`"
              label-width="0px"
              :rules="[{ required: true, message: `${tableTitle[3]}不能为空` }]"
            >
              <el-input
                v-model="scope.row.continuousFee"
                type="number"
                :min="0"
                :disabled="!scope.row.status && scope.$index === 0"
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="dataForm.isFreeFee == 0" style="margin-top: 20px">
        <el-button type="primary" icon="el-icon-location-outline" @click="addTransfee()">
          点击添加可配送的区域和运费
        </el-button>
      </div>



      <el-table :data="dataForm.notransfees" border style="width: 100%" class="table-con">
        <el-table-column
          header-align="center"
          align="center"
          width="450"
          label="不可配送区域"
        >
          <template #default="scope">
            <span
              v-if="
                (!scope.row.offcityList || !scope.row.offcityList.length) && scope.$index >=0
              "
            >请选择不可配送区域</span
            >
            <span v-if="scope.$index >= 0">
              <el-tag v-for="city in scope.row.offcityList" :key="city.areaId">{{
                  city.areaName
                }}</el-tag>
            </span>
            <el-button
              v-if="isAuth('shop:transfee:update') && scope.$index >=0"
              type="text"
              @click="onoffAddOrUpdate(`${scope.$index}`)"
            >
              编辑
            </el-button>
            <el-button
              v-if="isAuth('shop:transfee:delete') && scope.$index >=0"
              type="text"
              @click="onoffDelete(`${scope.$index}`)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="180"
          :label="noTranstableTitle[0]"
        >
          <template #default="scope">
            <el-form-item
              :prop="`notransfees.${scope.$index}.reason`"
              label-width="0px"
              :rules="[{ required: true, message: `${noTranstableTitle[0]}不能为空` }]"
            >
              <el-input
                v-model="scope.row.reason"
                type="text"
                :disabled="!scope.row.status && scope.$index === 0"
              />
            </el-form-item>
          </template>
        </el-table-column>

      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" icon="el-icon-location-outline" @click="addNoTransfee()">
          点击添加不可配送的区域
        </el-button>
      </div>





      <el-checkbox
        v-if="!dataForm.isFreeFee"
        v-model="dataForm.hasFreeCondition"
        style="margin-top: 10px; font-size: 50px"
      >
        指定条件包邮
      </el-checkbox>
      <el-table
        v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee"
        :data="dataForm.transfeeFrees"
        border
        style="width: 100%"
      >
        <el-table-column
          header-align="center"
          align="center"
          width="350"
          label="指定区域"
        >
          <template #default="scope">
            <span v-if="!scope.row.freeCityList || !scope.row.freeCityList.length"
              >请选择指定包邮城市</span
            >
            <el-tag v-for="city in scope.row.freeCityList" :key="city.areaId">
              {{ city.areaName }}
            </el-tag>
            <el-button
              v-if="isAuth('shop:transfee:update')"
              type="text"
              @click="addOrUpdateTransfeeFree(`${scope.$index}`)"
            >
              编辑
            </el-button>
            <el-button
              v-if="isAuth('shop:transfee:delete')"
              type="text"
              @click="deleteTransfeeFree(`${scope.$index}`)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="600"
          label="设置包邮条件"
        >
          <template #default="scope">
            <el-radio-group v-model="scope.row.freeType">
              <el-radio :label="0"> 满件/重量/体积包邮 </el-radio>
              <el-radio :label="1"> 满金额包邮 </el-radio>
              <el-radio :label="2"> 满件/重量/体积且满金额包邮 </el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="left">
          <template #default="scope">
            <el-form-item
              v-if="scope.row.freeType == 1 || scope.row.freeType == 2"
              :prop="`transfeeFrees.${scope.$index}.amount`"
              label-width="0px"
              :rules="[{ required: true, message: `不能为空` }]"
            >
              满 <el-input v-model="scope.row.amount" style="width: 100px" /> 元包邮
            </el-form-item>
            <el-form-item
              v-if="scope.row.freeType == 0 || scope.row.freeType == 2"
              :prop="`transfeeFrees.${scope.$index}.piece`"
              label-width="0px"
              :rules="[{ required: true, message: `不能为空` }]"
            >
              满
              <el-input v-model="scope.row.piece" style="width: 100px" /> 件/重量/体积包邮
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="dataForm.isFreeFee == 0" style="margin-top: 20px">
        <el-button
          type="primary"
          icon="el-icon-location-outline"
          @click="addTransfeeFree()"
        >
          点击添加指定包邮条件
        </el-button>
      </div>




    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false"> 取消 </el-button>
        <el-button type="primary" @click="onSubmit()"> 确定 </el-button>
      </div>
    </template>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @ok="hanldeOk" @refresh-data-list="getDataList" />

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="offaddOrUpdateRef" @ok="offhanldeOk" @refresh-data-list="getDataList" />
  </el-dialog>
</template>

<script setup>
import { isAuth } from "@/utils";
import { ElMessage } from "element-plus";
import { Debounce } from "@/utils/debounce";
import AddOrUpdate from "./addDiqu.vue";
import AddoffOrUpdate from "./addoffDiqu.vue";
const emit = defineEmits(["refreshDataList"]);

// 编辑的第几条数据
var isEditIndex = null;

const hasFreeCondition = ref(0);
const visible = ref(false);
const dataForm = ref({
  hasFreeCondition: false,
  transName: "",
  createTime: "",
  chargeType: 0,
  transportId: 0,
  isFreeFee: 0,
  transfees: [{ cityList: [], status: 1 }],
  notransfees: [],
  transfeeFrees: [{ freeCityList: [], freeType: 0 }],
});
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示多少条
});
const tableTitle = computed(() => {
  const titles = [
    ["首件(个)", "运费(元)", "续件(个)", "续费(元)"],
    ["首重(kg)", "运费(元)", "续重(kg)", "续费(元)"],
    ["首体积(m³)", "运费(元)", "续体积(m³)", "续费(元)"],
  ];
  if (dataForm.value.chargeType) {
    return titles[dataForm.value.chargeType];
  }
  return titles[0];
});
const noTranstableTitle = computed(() => {
  const titles = [
    ["原因"],
  ];
  if (dataForm.value.chargeType) {
    return titles[dataForm.value.chargeType];
  }
  return titles[0];
});

// 如果当前对话框不可见，则关闭选择城市的对话框
watch(
  () => visible.value,
  (val) => {
    if (!val) {
      // addOrUpdateVisible.value = false
      addOrUpdateRef.value.show = false;
      offaddOrUpdateRef.value.show = false;
    }
  }
);

const addOrUpdateVisible = ref(false);
const dataFormRef = ref(null);
const init = (id) => {
  visible.value = true;
  dataForm.value.transportId = id || 0;
  nextTick(() => {
    dataFormRef.value?.resetFields();
    dataForm.value = {
      hasFreeCondition: false,
      transName: "",
      createTime: "",
      chargeType: 0,
      transportId: 0,
      isFreeFee: 0,
      transfees: [{ cityList: [], status: 1 }],
      notransfees: [],
      transfeeFrees: [{ freeCityList: [], freeType: 0 }],
    };
  });
  if (dataForm.value.transportId) {
    http({
      // 获取运费模板数据
      url: http.adornUrl(`/shop/transport/info/${dataForm.value.transportId}`),
      method: "get",
    }).then(({ data }) => {
      if (data.isFreeFee) {
        data.transfees[0].status = 0;
      } else {
        data.transfees[0].status = 1;
      }

      dataForm.value = data;
      dataForm.value.hasFreeCondition = !!data.hasFreeCondition;
    });
  }
};
defineExpose({ init });

const getDataList = (row, cityList, type) => {
  if (type === 0) {
    dataForm.value.transfees[row].cityList = cityList;
  }
  if (type === 1) {
    dataForm.value.transfeeFrees[row].freeCityList = cityList;
  }
};

/**
 * 添加运费项
 */
const addTransfee = () => {
  dataForm.value.transfees.push({ cityList: [], status: 1 });
};

/**
 * 添加不可配送区域 notransfees
 */
const addNoTransfee = () => {
  console.log(dataForm)
  dataForm.value.notransfees.push({ offcityList: [], status: 1 });
};

/**
 * 删除运费项
 */
const onDelete = (rowIndex) => {
  dataForm.value.transfees.splice(rowIndex, 1);
};

/**
 * 删除不可配送项
 */
const onoffDelete = (rowIndex) => {
  dataForm.value.notransfees.splice(rowIndex, 1);
};

const addOrUpdateRef = ref(null);
const offaddOrUpdateRef = ref(null);
/**
 * 可配送区域和运费编辑
 */

const onAddOrUpdate = (rowIndex) => {
  isEditIndex = rowIndex;
  let cityList = dataForm.value.transfees[rowIndex].cityList;
  addOrUpdateRef.value.show = true;
  addOrUpdateRef.value.updateoffCityList(cityList);
  let allSelectCityList = [];
  for (let i = 1; i < dataForm.value.transfees.length; i++) {
    const cityList = dataForm.value.transfees[i].cityList;
    allSelectCityList = allSelectCityList.concat(cityList);
  }
  nextTick(() => {
    // addOrUpdateRef.value?.init(
    //   rowIndex,
    //   dataForm.value.transfees[rowIndex].cityList || [],
    //   allSelectCityList,
    //   0
    // );
  });
};



/**
 * 不可配送区域和运费编辑
 */

const onoffAddOrUpdate = (rowIndex) => {
  isEditIndex = rowIndex;
  let offcityList = dataForm.value.notransfees[rowIndex].offcityList;
  offaddOrUpdateRef.value.show = true;
  offaddOrUpdateRef.value.updateCityList(offcityList);
  let allSelectCityList = [];
  for (let i = 0; i <= dataForm.value.notransfees.length; i++) {
    const offcityList = dataForm.value.notransfees[i].offcityList;
    allSelectCityList = allSelectCityList.concat(offcityList);
  }
  nextTick(() => {
    // addOrUpdateRef.value?.init(
    //   rowIndex,
    //   dataForm.value.transfees[rowIndex].cityList || [],
    //   allSelectCityList,
    //   0
    // );
  });
};

/**
 * 添加指定包邮条件
 */
const addTransfeeFree = () => {
  if (dataForm.value.hasFreeCondition) {
    dataForm.value.transfeeFrees?.push({ freeCityList: [], freeType: 0 });
  }
};

/**
 * 删除指定包邮条件
 */
const deleteTransfeeFree = (rowIndex) => {
  dataForm.value.transfeeFrees?.splice(rowIndex, 1);
};

/**
 * 指定包邮条件编辑
 */
const addOrUpdateTransfeeFree = (rowIndex) => {
  // addOrUpdateVisible.value = true
  addOrUpdateRef.value.show = true;
  let key = dataForm.value.transfeeFrees[rowIndex].freeCityList;
  console.log(key);

  let allSelectCityList = [];
  for (let i = 1; i < dataForm.value.transfeeFrees.length; i++) {
    const freeCityList = dataForm.value.transfeeFrees[i].freeCityList;
    allSelectCityList = allSelectCityList.concat(freeCityList);
  }
  nextTick(() => {
    // addOrUpdateRef.value?.init(
    //   rowIndex,
    //   dataForm.value.transfeeFrees[rowIndex].freeCityList || [],
    //   allSelectCityList,
    //   1
    // );
  });
};


/**
 * 改变模板类型， 0 买家承担运费 1 卖家包邮
 * @param val
 */
const changeFreeFee = (val) => {
  dataForm.value.hasFreeCondition = false;
  if (val) {
    dataForm.value.chargeType = 0;
    dataForm.value.transfees = [
      {
        cityList: [],
        status: 0,
        firstPiece: 1,
        firstFee: 0,
        continuousPiece: 1,
        continuousFee: 0,
      },
    ];
  } else {
    dataForm.value.transfees = [{ cityList: [], status: 1 }];
  }
};

/**
 * 校验输入的数字
 */
const checkNumber = (row, type) => {
  if (type === 1) {
    row.firstPiece = getNumber(row.firstPiece);
    row.firstPiece = row.firstPiece === 0 ? 1 : row.firstPiece;
  } else if (type === 3) {
    row.continuousPiece = getNumber(row.continuousPiece);
    row.continuousPiece = row.continuousPiece === 0 ? 1 : row.continuousPiece;
  }
};

/**
 * 保留整数并小于零的数设为0
 */
const getNumber = (num) => {
  num = Math.round(num);
  return num < 0 ? 0 : num;
};

/**
 * 表单提交
 */
const onSubmit = Debounce(() => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      for (let i = 1; i < dataForm.value.transfees.length; i++) {
        const transfee = dataForm.value.transfees[i];
        if (transfee.cityList.length === 0) {
          ElMessage({
            message: "请选择可配送区域",
            type: "error",
            duration: 1500,
          });
          return;
        }
      }
      for (let i = 0; i < dataForm.value.notransfees.length; i++) {
        console.log(i)
        const notransfee = dataForm.value.notransfees[i];
        console.log(notransfee);
        console.log(notransfee.offcityList);
        console.log(notransfee.offcityList.length);
        if (notransfee.offcityList.length === 0) {
          ElMessage({
            message: "请选择不可配送区域",
            type: "error",
            duration: 1500,
          });
          return;
        }
      }
      if (dataForm.value.hasFreeCondition) {
        hasFreeCondition.value = 1;
      } else {
        hasFreeCondition.value = 0;
      }
      dataForm.value.transfees[0].cityList = [];
      http({
        url: http.adornUrl("/shop/transport"),
        method: dataForm.value.transportId ? "put" : "post",
        data: http.adornData({
          transportId: dataForm.value.transportId || undefined,
          transName: dataForm.value.transName,
          chargeType: dataForm.value.chargeType,
          isFreeFee: dataForm.value.isFreeFee,
          transfees: dataForm.value.transfees,
          notransfees: dataForm.value.notransfees,
          transfeeFrees: dataForm.value.transfeeFrees,
          hasFreeCondition: hasFreeCondition.value,
        }),
      }).then(() => {
        ElMessage({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            visible.value = false;
            emit("refreshDataList", page);
          },
        });
      });
    }
  });
});
// 选中地区之后点击确定
const hanldeOk = (data) => {
  console.log(data);
  dataForm.value.transfees[isEditIndex].cityList = data;
};
// 选中地区之后点击确定
const offhanldeOk = (data) => {
  console.log(data);
  dataForm.value.notransfees[isEditIndex].offcityList = data;
};
</script>

<style scoped>
.transport-dialog .table-con :deep(.el-form-item) {
  margin-top: 16px;
  margin-bottom: 16px !important;
}
</style>
